
import 'dart:ui';

import 'package:easy_stepper/easy_stepper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:xim/common/get_style_view.dart';
import 'package:xim/config/route_config.dart';
import 'package:xim/widget/common/state.dart';

class RegisterPageStyle extends Style with AppBarMixin {

  final titleStyle = const TextStyle(fontSize: 12, fontWeight: FontWeight.w500);

  /// 密码输入框焦点节点对象
  final pwdFocusNode = FocusNode();

  /// 密码确认输入框焦点节点对象
  final ackPwdFocusNode = FocusNode();

  /// fontSize
  get _fs => 14.0;

  @override
  List<Widget> get appBarActions => [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0),
      child: InkWell(
        onTap: ()=>Routers.toHome(type: RouteType.replaceAll),
        child: const Text("跳过")
      ),
    )
  ];

  @override
  Color get appBarBgColor => Colors.transparent;

  @override
  double get elevation => 0;

  /// 步骤控件
  Widget stepper(int activeStep) => SizedBox(
    height: 60,
    child: EasyStepper(
      stepRadius: 12,
      activeStep: activeStep,
      internalPadding: 28,
      showLoadingAnimation: false,
      unreachedStepBackgroundColor: Colors.grey,
      lineStyle: const LineStyle(lineType: LineType.normal),
      steps: const [
        EasyStep(
          customStep: Text("1"),
          title: '设置密码',
        ),
        EasyStep(
          customStep: Text("2"),
          title: '备份助记词',
        ),
        EasyStep(
          customStep: Text("3"),
          title: '确认助记词',
        )
      ],
    ),
  );

  TextStyle get hintStyle => TextStyle(
      fontSize: 12,
      color: textColor.color
  );

  Widget get onlyFingerprintBtn => Container(
    width: 0.4.sw,
    padding: const EdgeInsets.symmetric(vertical: 12),
    decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(18)),
        border: Border.all()
    ),
    child: const Center(child: Text("仅使用指纹登录")),
  );

  /// 创建密码按键
  Widget createPwdBtn({Color? bgColor, Color? textColor}) => Container(
    width: 0.4.sw,
    padding: const EdgeInsets.symmetric(vertical: 12),
    decoration: const BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.all(Radius.circular(18)),
    ),
    child: const Center(
        child: Text("创建密码", style: TextStyle(color: Colors.white),)
    ),
  );

  /// 创建密码按键
  Widget btn(String text, {Color? bgColor, Color? textColor}) => Container(
    width: 0.4.sw,
    padding: const EdgeInsets.symmetric(vertical: 12),
    decoration: BoxDecoration(
      color: bgColor??Colors.blue,
      borderRadius: const BorderRadius.all(Radius.circular(18)),
    ),
    child: Center(
        child: Text(text, style: TextStyle(color: textColor??Colors.white),)
    ),
  );

  /// kais按键
  Widget get protectAccountStartBtn => Container(
    width: 0.6.sw,
    padding: const EdgeInsets.symmetric(vertical: 12),
    decoration: const BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.all(Radius.circular(18)),
    ),
    child: const Center(
        child: Text("开始", style: TextStyle(color: Colors.white),)
    ),
  );

  /// 提示文本
  Widget get _hintText => Column(
    children: [
      Text.rich(
        maxLines: 2,
        softWrap: true,
          TextSpan(
              children: [
                TextSpan(
                  style: hintStyle,
                  text: "已了解XIM无法为我找回此密码，",
                ),
                TextSpan(
                  style: TextStyle(
                    color: Colors.blue.shade600,
                    fontSize: hintStyle.fontSize
                  ),
                  text: "了解更多",
                ),
              ]
          )
      ),
    ],
  );

  /// 步骤页面统一构建方法
  Widget pageBuilder({required String title, required String tips, required Widget child}) =>
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 0),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Text(title, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),),
            const SizedBox(height: 8,),
            Text(
              tips,
              style: const TextStyle(fontSize: 14),
            ),
            const SizedBox(height: 12,),
            Expanded(child: child)
          ],
        ),
      );

  Widget get waringHint => Column(
    children: [
      Text.rich(TextSpan(
          text: "不要冒丢失账号的风险。",
          style: TextStyle(fontSize: _fs, color: textColor.color),
          children: [
            TextSpan(
              text: "在信任的地点保存您的 ",
              style: TextStyle(fontSize: _fs, color: textColor.color),
            ),
            TextSpan(
              text: "私钥助记词",
              style: TextStyle(fontSize: _fs, color: const Color(0xff00aeec)),
            ),
            TextSpan(
              text: ",以此保护你的账号。",
              style: TextStyle(fontSize: _fs, color: textColor.color),
            ),
            TextSpan(
              text: "如果你更换了新设备或重置了该应用，这是你将是您登录该应用的唯一途径",
              style: TextStyle(fontSize: _fs, color: textColor.color, fontWeight: FontWeight.w500),
            )
          ]
      )),
      const SizedBox(height: 30,),
      Expanded(child: Container()),
      GestureDetector(
          onTap: (){
            EasyLoading.show(status: '账号生成中...');
          },
          child: protectAccountStartBtn
      ),
      const SizedBox(height: 10,),
      Center(
        child: Text('强烈建议', style: TextStyle(fontSize: 12, color: weakTextColor.color),),
      )
    ],
  );

  /// 密码输入框
  Widget pwdInput({void Function(String data)? onChanged, String? Function(String? data)? validator}) => TextFormField(
    obscureText: true,
    focusNode: pwdFocusNode,
    onTapOutside: (e)=>pwdFocusNode.unfocus(),
    autovalidateMode: AutovalidateMode.disabled,
    onChanged: (e)=>onChanged?.call(e),//updatePassword1(e ?? ""),
    validator: (value)=>validator?.call(value),
    decoration: const InputDecoration(
      labelText: "新密码",
      border: OutlineInputBorder(),
      // errorText: controller.isEmptyPassword()  || controller.validCheckPassword() ?null:'两次密码不一致'
    ),
  );

  /// 确认密码输入框
  Widget ackPwdInput({void Function(String data)? onChanged, String? Function(String? data)? validator}) => TextFormField(
    obscureText: true,
    focusNode: ackPwdFocusNode,
    onTapOutside: (e)=>ackPwdFocusNode.unfocus(),
    autovalidateMode: AutovalidateMode.disabled,
    onChanged: (e)=>onChanged?.call(e),//updatePassword1(e ?? ""),
    validator: (value)=>validator?.call(value),
    decoration: const InputDecoration(
      labelText: "新密码",
      border: OutlineInputBorder(),
      // errorText: controller.isEmptyPassword()  || controller.validCheckPassword() ?null:'两次密码不一致'
    ),
  );

  /// 指纹登录选择框
  Widget usingFingerprintSelectBox({required bool isUserFingerprint, required void Function(bool data) onChanged})=> Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text("使用指纹登录", style: hintStyle,),
      Checkbox(value: isUserFingerprint, onChanged: (e){
        if(e!=null){
          onChanged.call(e);
        }
      })
    ],
  );

  /// 提示内容选择框
  Widget readNoteSelectBox({required bool isReadMe, required void Function(bool? data) onChanged})=> Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      _hintText,
      Checkbox(value: isReadMe, onChanged: onChanged)
    ],
  );

  bool get isFocus => pwdFocusNode.hasFocus || ackPwdFocusNode.hasFocus;

}